<template>
	<view class="flex justify-between align-center box">
		<view @click="toggleActionSheet">
			<text>{{ selectedSex ? selectedSex : '请选择' }}</text>
			<!-- <uv-input v-model="/selectedSex" placeholder="请选择" border="none"></uv-input> -->
			<uv-action-sheet ref="sexSelect" :actions="actions" :title="title" :description="description"
				@select="handleSelect" cancelText="取消" round="10"></uv-action-sheet>
		</view>
		<uv-icon name="close-circle" v-if="selectedSex" @click="clear"></uv-icon>
	</view>
</template>

<script>
	export default {
		name: 'actionSheet',
		props: {
			value: {
				type: String,
				default: ''
			},
			actions: {
				type: Array,
				default: () => []
			},
			title: {
				type: String,
				default: ''
			},
			description: {
				type: String,
				default: ''
			}
		},
		created() {
			this.selectedSex = this.findObj(this.value);
		},
		data() {
			return {
				selectedSex: this.findObj(this.value),
				actionSheetVisible: false
			};
		},
		watch: {
			value(newVal) {
				this.selectedSex = this.findObj(newVal);
			}
		},
		methods: {
			toggleActionSheet() {
				this.$refs.sexSelect.open();
			},
			handleSelect(action) {
				this.selectedSex = action.name;
				this.$emit('handleSelect', action);
				this.$refs.sexSelect.close();
			},
			clear() {
				this.selectedSex = '';
				this.$emit('handleSelect', '');
			},
			findObj(value) {
				const obj = this.actions.find((item) => item.value === value);
				return obj ? obj.name : '请选择';
			}
		}
	};
</script>

<style scoped>
	.box {
		width: 100%;
	}
</style>